<template>
  <div class='app'>
    <h2>当前求和为:{{ sum }}</h2>
    <h3>xxxx</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加1</button>
    <button @click="plus">减1</button>
    <button @click="oddadd">奇数再加</button>
    <button @click="waitadd">等一等再加</button>
    <button @click="getdata">发送请求获取长度</button>
    <h2>学校变大写:{{ this.$store.getters.bigSchool }}</h2>
    <h2>地址变大写:{{ this.$store.getters.bigAddress }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    // 用mapState在state中的数据读出来
    ...mapState(['sum', 'school', 'adress'])
  },
  methods: {
    add() {
      this.$store.commit('JIA', this.n)
    },
    plus() {
      this.$store.commit('JIAN', this.n)
    },
    oddadd() {
      this.$store.dispatch('jishujia', this.n)
    },
    waitadd() {
      setTimeout(() => {
        this.$store.dispatch('yibujia', this.n)
      }, 1000);
    },

    // 发送请求
    getdata() {
      this.$store.dispatch('Sendreq')
    }
  },
}
</script>



<style scoped>
.app {
  background-color: skyblue;
  /* border-radius: 10%; */
  box-shadow: 0 0 10px;
  padding: 15px;
}

button {
  color: seagreen;
  margin: 0 6px;
}
</style>